
// react
import React, { useEffect } from "react";
// lib
import { Layout, Menu, Modal } from "antd";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  ArrowsAltOutlined,
  ShrinkOutlined,
} from "@ant-design/icons";
// components & widget
// import UserAvatar from "components/UserAvatar";
// style
import "./style.scss";
// config
// script & methods & public
// store
import { observer } from "mobx-react";
import { appState, userState } from "state/global";
import { state } from "./state";
// controller
import { clear, getScreenfull, nicknameFormat } from "./logic";
import { logoutService } from "biz/Auth/service";
// interface
// 其它

const { Header } = Layout;
const { confirm } = Modal;

function AdminHeader() {
  // props && state
  const { collapsed, isFull } = appState;
  const account = userState.getAccount();

  const sc = getScreenfull();

  const setScreenFull = () => {
    if (sc) {
      sc.toggle();
    }
  };

  useEffect(() => {
    const screenChange = () => {
      if (sc) {
        appState.setFull(sc.isFullscreen);
      }
    };

    if (sc) {
      sc.on("change", screenChange);
    }
    return () => {
      if (sc) {
        sc.off("change", screenChange);
      }
    };
  }, [sc]);

  const nickname = nicknameFormat(account.userName);

  const collapsedHandler = () => {
    appState.collapsedChange();
  };

  return (
    <Header className="app-header">
      {collapsed ? (
        <MenuUnfoldOutlined
          className="header-trigger"
          onClick={collapsedHandler}
        />
      ) : (
        <MenuFoldOutlined
          className="header-trigger"
          onClick={collapsedHandler}
        />
      )}
      <div className="app-header-action flex-center">
        {isFull ? (
          <ShrinkOutlined className="header-trigger" onClick={setScreenFull} />
        ) : (
          <ArrowsAltOutlined
            className="header-trigger"
            onClick={setScreenFull}
          />
        )}
        <Menu
          mode="horizontal"
          className="header-menu"
          items={[
            {
              label: (
                <div className="flex-center">
                  {/* <UserAvatar src={account.avatar} /> */}
                  <span className="ml-10">{nickname || ""}</span>
                </div>
              ),
              key: "SubMenu",
              children: [
                {
                  type: "group",
                  label: "登录用户",
                  key: "hmg-1",
                  children: [
                    {
                      label: account.userName,
                      key: "welcome",
                    },
                  ],
                },
                {
                  type: "group",
                  label: "系统操作",
                  key: "hmg-2",
                  children: [
                    // {
                    //   label: (
                    //     <button
                    //       className="basic-btn header-menu-btn"
                    //       onClick={() => {
                    //         confirm({
                    //           title: "清除本地数据的同时会退出系统",
                    //           onOk() {
                    //             clear();
                    //             setTimeout(() => {
                    //               logoutService();
                    //             }, 1000);
                    //           },
                    //         });
                    //       }}
                    //     >
                    //       清除本地数据
                    //     </button>
                    //   ),
                    //   key: "clean",
                    // },
                    {
                      label: (
                        <button
                          className="basic-btn header-menu-btn"
                          onClick={() => {
                            state.pwdModal = true;
                          }}
                        >
                          修改登录密码
                        </button>
                      ),
                      key: "pwd",
                    },
                    // {
                    //   label: (
                    //     <button
                    //       className="basic-btn header-menu-btn"
                    //       onClick={() => {
                    //         state.infoModal = true;
                    //       }}
                    //     >
                    //       修改我的信息
                    //     </button>
                    //   ),
                    //   key: "info",
                    // },
                    {
                      label: (
                        <button
                          className="basic-btn header-menu-btn"
                          onClick={() => {
                            confirm({
                              title: `当前账户${account.userName}确认注销退出系统？`,
                              onOk() {
                                logoutService();
                              },
                            });
                          }}
                        >
                          退出登录
                        </button>
                      ),
                      key: "logout",
                    },
                  ],
                },
              ],
            },
          ]}
        />
      </div>
    </Header>
  );
}

export default observer(AdminHeader);
